<template>
  <el-container v-if="!is_compare" class="main-box">
    <el-main ref="Box">
      <el-header>
        <div class="top-head">
          <div class="flex flex-a">
            <div class="float-man-l-img">
              {{ user_name.substring(user_name.length - 2) }}
            </div>
            <div class="head-text f-w-700">{{user_name}}的月小结</div>
          </div>
          <div class="top-head-content flex flex-a flex-1">
            <span
              class="top-text"
              @click="time_or_list = !time_or_list"
            >
              {{ time_or_list ? '切换至列表导航视图' : '切换至时间导航视图' }}
            </span>
            <div v-show="!time_or_list"  @click="handleExport"
                 :style="is_loading?'color: #666666;':'color: #1966E2'"
                 class="flex flex-a cursor-p export-text">
              <svg-icon class="f-s-20"
                        style="margin-right: 4px;" class-name="m-r-7" icon-class="appraiseout"/>
              <span class="f-s-20">导出</span>
            </div>
            <el-date-picker
              v-show="time_or_list"
              class="search-text help—change"
              type="month"
              v-model="month_data"
              placeholder="选择月份"
              @change="selectTime"
            />
          </div>
        </div>
      </el-header>
      <el-scrollbar class="person_body"  :style="time_or_list?'height: calc(100vh - 184px);':'height: calc(100vh - 220px);'">
        <div v-if="time_or_list" class="my-duty" v-for="(item, index) in time_list" :key="index"
             :style="index !== time_list.length-1?'margin-bottom:12px':''">
          <div class="box-card flex">
            <div class="flex-1">
              <div>
                <div class="card-head" :ref="index">
                  <div class="f-s-20 color-1966E2 flex flex-a">
                    <i class="el-icon-time"
                       style="color: #1966E2; font-size: 24px; background-color: #fff; margin-right: 7px"/>
                    <span class="f-w-700">{{ item.monthCode.substring(4)}}月</span>
                  </div>
                  <header-features v-show="my_id === user_id && item.contentList.length"
                                   not_clickable
                                   is_diary
                                   is_week
                                   is_documentary
                                   is_compare
                                   :type_num="2"
                                   router_type="record"
                                   :id="item.recordMonthId"
                                   :text="STATUS[item.state]"
                                   is_text
                                   :personal_eit="item.state === '0' || item.state === '2'"
                                   @handleReview="handleReview(item.recordMonthId,index)"
                                   @handleDepartment="handleDepartment(index)"
                                   @handleCompare="handleCompare(item)"
                                   @handleOpenDiary="handleOpenDiary(item.monthCode)"
                                   @OpenWeekPlan="OpenWeekPlan(item.monthCode)"
                                   @handleOpenWeek="handleOpenWeek(item.monthCode)"
                  />
                </div>
                <!--  第0项取默认值  -->
                <record-edit :personal_eit="my_id === user_id && (!item.state || item.state === '0' || item.state === '2')"
                             :head_type_list="head_type_list"
                             isAit
                             is_fu
                             :text="item.contentList"
                             diary_type="month"
                             :userList="userList"
                             router_type="record"
                             :is_add_content="user_id === my_id"
                             :font_size="font_change.font_size"
                             :font_family="font_change.font_family"
                             @handleAddDuty="handleAddDuty($event,item,index)"
                             @handleEitContent="handleEitContent($event,index,item.state)"
                             @handleDeleteDuty="handleDeleteDuty($event,index)"
                />
              </div>
            </div>
          </div>
        </div>
        <div v-if="!time_or_list" class="my-duty">
          <div class="box-form">
            <div class="form-content-1 b-b-1">
              <div class="f-s-16">内容关键词:</div>
              <div>
                <el-input
                  class="search-text help—change"
                  placeholder="请输入内容"
                  v-model="search_text"
                  clearable>
                </el-input>
              </div>
            </div>
            <div class="form-content b-b-1">
              <span class="f-s-16">记录时间:</span>
              <div>
                <el-checkbox v-for="(item, index) in time_range" :key="index"
                             v-model="item.is_checked"
                             @change="handleChangeTime(index)">{{ item.text }}</el-checkbox>
              </div>
            </div>
            <div class="form-content">
              <span class="f-s-16">时间范围:</span>
              <div>
                <el-date-picker
                  ref="timePicker"
                  size="mini"
                  style="width: 228px;"
                  is-range
                  v-model="time_limit"
                  type="monthrange"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份"
                  @change="confirmTimeLimit"
                />
              </div>
            </div>
            <div class="form-content">
              <div class="inquire cursor-p" @click="handleInquire">查询</div>
              <el-table
                :data="table_items"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'left'}"
                style="width: 100%;font-size: 16px;"
                border
                :span-method="objectSpanMethod"
              >
                <el-table-column
                  label="日期"
                  width="112"
                >
                  <template slot-scope="{row}">
                    <div style="text-align: center;">
                      {{ row.weekNum.substring(0,4)+'年'+ row.weekNum.substring(4)+'月' }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="类型"
                  width="88"
                >
                  <template slot-scope="{row}">
                    <div style="text-align: center;">
                      {{ row.recordClass | typeStr }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="内容"
                >
                  <template slot-scope="{row}">
                    <div style="display: flex;">
                      <span class="content-bit">{{ row.text_index }}</span>
                      <span class="content-text-1" v-html="row.content"></span>
                    </div>
                  </template>
                </el-table-column>
                                <el-table-column
                                  prop="address"
                                  align="center"
                                  label="关联"
                                  width="140"
                                >
                                  <template slot-scope="{row,$index}">
                                    <div style="text-align: center;color: #1966E2;cursor: pointer">
                                      <div class="content-text-1" @click="handleOpenDiary(row.weekNum)">
                                        日记录
                                      </div>
                                      <div class="content-text-1" @click="handleOpenWeek(row.weekNum)">
                                        周计划
                                      </div>
                                      <div class="content-text-1" @click="OpenWeekPlan(row.weekNum)">
                                        周纪实
                                      </div>
                                    </div>
                                  </template>
                                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <div v-show="!time_or_list" style="width: 100%;height: 35px;padding-right: 12px;">
        <el-pagination
          style="height: 100%;background-color: #FFFFFF;border-top: 1px solid rgba(0,0,0,0.04);
          border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;"
          :page-size="Number(pagination.pageRows)"
          :pager-count="11"
          layout="prev, pager, next"
          :total="Number(pagination.total)"
          @current-change="currentChange"
        />
      </div>
    </el-main>
    <el-aside width="300px">
      <mail-list
        class="mail-list"
        :duty_list="duty_list"
        :float_list="float_list"
        :duty_index="2"
        router_type="record"
        @handleManDuty="handleManDuty"
        @recordCompared="recordCompared"
      />
      <!--      <SideList  />-->
    </el-aside>
    <vxe-modal v-model="centerDialogVisible" class="modalBox" :title="personage_name" width="60%" height="60%" show-zoom resize>
      <template v-slot>
        <div class="personage"
             v-for="(item, index) in personageList" :key="index"
             :style="index != personageList.length-1?'border-bottom: 1px solid #eee;':''"
        >
          <div class="f-s-16-1">{{plan_or_diary === 2?item.recordDate:plan_or_diary === 1?item.planWeek.substring(4)+'周':item.weekCode.substring(4)+'周'}}</div>
          <div v-if="!item.contentList || !item.contentList.length" class="personage_box">
            <p style="display: none"></p>
            <p class="personage-text">暂无内容</p>
          </div>
          <div v-if="plan_or_diary === 2 || plan_or_diary === 1" v-for="(item_c, index_c) in item.contentList" :key="index_c" class="personage_box">
            <p class="text-number">{{ index_c + 1 }}</p>
            <p class="personage-text" v-html="item_c.content" />
          </div>
          <div v-if="plan_or_diary === 0" v-for="(item_c, index_c) in item.contentList" :key="index_c" class="personage_box">
            <p class="text-number">{{ index_c + 1 }}</p>
            <p class="personage-text" v-html="item_c.content" />
            <p class="f-s-16-1" style="color: #1966E2">{{ item_c.recordClass | typeDegree }}</p>
          </div>
        </div>
        <div class="personage" v-if="!personageList.length">暂无内容</div>
      </template>
    </vxe-modal>
  </el-container>
  <div v-else>
    <el-container class="main-box-1">
      <el-header>
        <div class="head">
          <div class="head-left">
            <div v-show="name_list.length" class="f-s-20">
              <span>关于</span>
              <span class="f-w-700">{{ name_list.join('与') }}</span>
              <span>的对比</span>
            </div>
            <div class="compared cursor-p" @click="handleCompared">
              <span>更多人员对比 ></span>
            </div>
          </div>
          <div class="head-right">
            <!--                      时间选择器-->
            <div class="time-select-box">

              <el-popover
                placement="bottom"
                width="260"
                v-model="visible"
                trigger="click"
              >
                <div class="p-4-0-11-0">
                  <el-tree
                    class="time-tree"
                    ref="timeTree"
                    :data="time_tree_copy"
                    show-checkbox
                    node-key="id"
                    empty-text="请选择时间类型"
                    check-strictly
                    expand-on-click-node
                    highlight-current
                    :default-expanded-keys="left_open_list"
                    :default-checked-keys="yearList"
                    @node-expand="nodeExpand"
                    @node-collapse="nodeCollapse"
                    @check-change="leftTreeChange"
                  />
                  <div class="inquire-1 f-s-16-1" @click="handleInquire1">查询</div>
                </div>
                <div slot="reference" class="text-font" style="cursor: pointer;">
                  <div class="time-select-head">选择月份</div>
                </div>
              </el-popover>
            </div>
            <button class="btn-switch cursor-p"
                    @click="handleChange">
              <svg-icon class="f-s-16-1"
                        style="color: #FFFFFF" :icon-class="is_switchover === 0?'appraiseheng':'appraisezong'"/>
              {{ is_switchover === 0 ? '纵向布局' : '横向布局' }}
            </button>
            <button class="btn-unified cursor-p" @click="handleExportCompare">
              <svg-icon class="f-s-16-1"
                        style="color: #1966E2" icon-class="appraiseout"/>
              导出
            </button>
            <button class="btn-unified cursor-p" @click="handleStopCompare">
              结束对比
            </button>
            <button class="btn-unified cursor-p" v-if="false">
              <img src="@/assets/appraise/icon/contrast_dayin.png" alt="">
              打印
            </button>
          </div>
        </div>
      </el-header>
      <el-main ref="Box">
        <div class="content my-duty-1">
          <compared-record-table-endlong v-if="compared_list.length && is_change_table === 0"
                                        router_type="record"
                                        compared_type="1"
                                        :compared_list="compared_list"/>
          <compared-record-table-across v-if="compared_list.length && is_change_table === 1"
                                         router_type="record"
                                         compared_type="1"
                                         :compared_list="compared_list"/>
          <div class="kong-state" v-show="!compared_list.length">
            <div class="flex f-dir align-center kong-box">
              <img class="kong" src="@/assets/appraise/icon/kongzhuangtai.png" alt=""/>
              <div class="kong-text">选择后再查看内容哦~</div>
            </div>
          </div>
        </div>
        <Transfer v-model="transferShow" :compareIds="compare_id" :personList="personnel_list" isPersonCheck @allShuttleBox="allShuttleBox" />

      </el-main>
    </el-container>
  </div>
</template>

<script>

import ModuleHeader from '@/appraise/components/ModuleHeader'
import HeaderFeatures from '@/appraise/components/HeaderFeatures'
import RecordEdit from '@/appraise/components/recordEdit'
import MailList from '@/appraise/components/MailList'
import { fileDownload, syncRequest } from '@/utils/httpRequet'

import PeopleAcross from '@/appraise/components/PeopleAcross'
import ComparedRecordTableEndlong from '@/appraise/components/comparedRecordTableEndlong'
import ComparedRecordTableAcross from '@/appraise/components/comparedRecordTableAcross'
import Transfer from '@/appraise/components/Transfer'

export default {
  name: 'diaryIndex',  //日记录
  components: {
    ModuleHeader,
    HeaderFeatures,
    RecordEdit,
    MailList,

    PeopleAcross,
    ComparedRecordTableEndlong,
    ComparedRecordTableAcross,
    Transfer
  },
  filters: {
    typeStr: function(value) {
      const str = {
        '0': '工作计划',
        '1': '工作纪实',
        '2': '个人评价'
      }
      return str[value]
    },
    typeDegree: function(value) {
      const str = {
        '1': '重要',
        '2': '日常',
        '3': '其他'
      }
      return str[value]
    }
  },
  data() {
    return {
      is_compare: false,
      transferShow: false,
      type: 0,
      visible: false,
      form_type_index: 2,
      currentNodeKey: '',
      compare_id: [],
      name_list: [],//对比人或部门
      is_switchover: 0,
      is_change_table: 2,
      init_month: {},
      compared_list: [], //对比列表
      time_tree_copy: [],
      time_tree: [],
      left_pitch: [], // 选中节点
      left_open_list: [], // tree默认展开
      yearList: [], // tree默认显示
      isShow: false,
      personnel_list: [],//人员穿梭框数据

      centerDialogVisible: false,
      plan_or_diary: 0,
      personageList: [],
      personage_name: '',
      search_text: '',
      month_data: '',
      record_date: '',
      is_loading: false,
      add_date: '',
      exist_data: false,
      my_id: '',
      user_name: '',
      user_id:'',
      mouth_List: [],
      month: Object.freeze(['01','02','03','04','05','06','07','08','09','10','11','12']),
      user_or_part:0,
      STATUS: Object.freeze({
        0: '提交审核',
        1: '待审核',
        2: '已拒绝',
        3: '已通过'
      }),
      time_range: [
        {text:'最近三个月',type:'1',is_checked:false},
        {text:'最近半年内',type:'2',is_checked:false},
        {text:'最近一年内',type:'3',is_checked:false}
      ],
      time_limit: '',
      time_range_index:-1,
      header_right: [
        { url: 'appraiseout', text: '导出', type: 0 },
        // { url: 'appraisedy', text: '打印', type: 1 }
      ],
      time_list: [],
      table_items: [],
      font_change: {
        font_size: 1,
        font_family: 1,
        type_content: -1
      },//字体选择
      time_or_list: true,
      duty_list: [
        { url: 'appraisediary', title: '日记录' },
        { url: 'appraiseweek', title: '周纪实' },
        { url: 'appraisemonth', title: '月小结' }
      ],
      head_type_list: [
        {text:'工作计划'},
        {text:'工作纪实'},
        {text:'个人评价'},
      ],
      float_list: [
        {
          f_name: '我部门成员',
          is_select: false,
          is_unfold: true,
          child: []
        },
        {
          f_name: '最近@我的人',
          is_select: false,
          is_unfold: true,
          child: []
        },
        {
          f_name: '我关注的人员',
          is_select: false,
          is_unfold: true,
          child: []
        }
      ],
      userList: [],
      pagination: {},
    }
  },
  mounted() {
    this.init()
    this.initTable()

    //拿取登录者信息
    this.user_name = this.$store.state.user.userInfo.realName
    this.my_id = this.$store.state.user.userInfo.userId
    this.user_id = this.my_id
    //月份选项
    const year_this = new Date().getFullYear()
    this.month.forEach(res => {
      const item = {
        label: year_this + '-' + res,
        value: year_this + res
      }
      this.mouth_List.push(item)
    })

    const time_tree_copy = syncRequest({
      url: 'pubGetWeekTree',
    })
    if(time_tree_copy.errorCode === '1') {
      this.time_tree = time_tree_copy.data.filter(res => res.id == new Date().getFullYear())
      this.time_tree_copy = JSON.parse(JSON.stringify(this.time_tree))
      this.time_tree_copy.forEach(item=>{
        item.children.forEach(res=> {
          delete res.children
        })
      })
      this.initPropsList(this.time_tree_copy);
    }

    const res = syncRequest({ url: 'pubQueryUserList', data: { orgId: '', name: '' } })
    // console.log( '@ 候选人' ,res)
    // console.log(res.data)
    if (res.errorCode === '1') this.userList = res.data
  },
  methods: {
    //初始化
    init(id,monthCode) {
      const month_get_all = syncRequest({
        url: 'monthGetAll',
        data: {
          userId: id?id:'',
          monthCode:monthCode?monthCode:''
        }
      })
      if(month_get_all.errorCode === '1') {
        this.time_list= month_get_all.data
        this.yearList.push(this.time_list[0].monthCode)
        this.time_list.forEach(res=> {
          res.contentList.forEach(result => {
            this.$set(result,'eit_time',false)
            this.$set(result,'is_eit',false)
          })
        })
      }
    },
    //初始化表格
    initTable(id,page,start_time,end_time,timeTag) {
      //获取个人日记录内容
      const month_query_page_table = syncRequest({
        url: 'monthQueryPageTable',
        method: 'POST',
        data: {
          userId: id?id:'',
          page: page?String(page):'1',
          queryWord: this.search_text,
          queryStartTime: start_time?start_time:'',
          queryEndTime: end_time?end_time:'',
          timeTag:timeTag?timeTag:''
        }
      })
      if(month_query_page_table.errorCode === '1') {
        this.pagination = month_query_page_table.page
        this.errorCodeSuccess(month_query_page_table.data)
      }
    },
    //初始化成功
    errorCodeSuccess(success) {
      this.table_items = []
      success.forEach(item => {
        item.contentList && item.contentList.forEach( (text_item, text_index) => {
          const temp_items = {
            weekNum: item.monthCode,
            recordClass: text_item.recordClass,
            text_index: text_index += 1,
            content: text_item.htmlText
          }
          this.table_items.push(temp_items)
        })
      })
    },
    /**  提交审核
     */
    handleReview(recordMonthId,index) {
      const month_submit_audit = syncRequest({
        url: 'monthSubmitAudit',
        data: {
          recordMonthId
        }
      })
      const errorCode = month_submit_audit.errorCode === '1'
      if(errorCode) {
        this.time_list[index].state = '1'
      }
      this.$message({
        message: errorCode? '提交成功':'提交失败',
        type: errorCode?'success':'error',
        duration: 2000,
        center: true
      })
    },
    /**  审核已提交
     */
    handleDepartment(index) {
      const content = '已拒绝:'+ this.time_list[index].refuseReason
      this.$message({
        message: content,
        type: 'error',
        duration: 2000,
      })
    },
    /** 获取一周内所有周信息
     */
    getDailyRecord(monthCode,type) {
      let data = {
        userId: this.user_id,
        monthCode:monthCode
      }
      const week_get_daily_record = syncRequest({
        url: type===0?'monthGetWeekRecord':type===1?'monthGetWeekPlan':'monthGetDailyRecord',
        data
      })
      if(week_get_daily_record.errorCode === '1') {
        this.personage_name = this.user_name
        this.personageList = week_get_daily_record.data
        this.plan_or_diary = type
        this.centerDialogVisible = true
      }
    },
    //对比
    handleCompare(item) {
      this.compare_id.push(this.user_id)
      this.weekCompare('',item.monthCode)
      this.yearList.push(item.monthCode)
      this.is_compare = !this.is_compare
    },
    /** 打开日计划
     */
    handleOpenDiary(monthCode) {
      this.getDailyRecord(monthCode,2)
    },
    /** 打开周纪实
     */
    OpenWeekPlan(monthCode) {
      this.getDailyRecord(monthCode,0)
    },
    /** 打开周计划
     */
    handleOpenWeek(monthCode) {
      this.getDailyRecord(monthCode,1)
    },
    /**
     * @name 确认时间范围
     */
    confirmTimeLimit() {
      console.log(this.time_limit)
    },
    /**
     * @name 新增内容
     */
    handleAddDuty(e,item,index) {
      const month_add_content = syncRequest({
        url: 'monthAddContent',
        method: 'POST',
        data: {
          recordMonthId:item.recordMonthId,
          content:e.item.content,
          class:e.item.recordClass,
          contentFileList:e.item.contentFileList?e.item.contentFileList:''
        }
      })
      if(month_add_content.errorCode === '1') {
        this.time_list[index].contentList[e.index].recordMonthId = month_add_content.data.recordMonthId
        this.time_list[index].contentList[e.index].recordMonthSubId = month_add_content.data.recordMonthSubId
        this.$message.success({ message: '增加成功', center: true })
      }
    },
    /** 编辑周记录内容
     *
     */
    handleEitContent(e,index,state) {
      const month_edit_content = syncRequest({
        url: 'monthEditContent',
        method: 'POST',
        data: {
          recordMonthSubId: e.item.recordMonthSubId,
          content: e.item.content,
          contentFileList: e.item.contentFileList?e.item.contentFileList:''
        }
      })
      if(month_edit_content.errorCode === '1') {
        if(e.item.contentFileList) {
          const file_obj = {
            attachId: e.item.contentFileList,
            fileName: e.item.fileName
          }
          this.time_list[index].contentList[e.index].fileList.push(file_obj)
        }else{
          this.time_list[index].contentList[e.index].fileList = []
        }
        if(state === '2') {
          this.time_list[index].state = '0'
        }
        this.$message.success({ message: '编辑成功', center: true })
      }
    },
    /**  删除内容
     */
    handleDeleteDuty(e) {
      let month_del_content = syncRequest({
        url: 'monthDelContent',
        data: {
          recordMonthSubId:e.item.recordMonthSubId
        }
      })
      const errorCode = month_del_content.errorCode === '1'
      this.$message({
        message: errorCode ? '删除成功' : '删除失败',
        type: errorCode ? 'success' : 'error',
        duration: 2000,
        center: true
      })
    },
    /**  选择日期
     */
    selectTime() {
      if(this.month_data) {
        let dateYear = new Date().getFullYear()
        let dateMonth = new Date().getMonth() + 1
        let h = this.month_data.getFullYear()
        let m = this.month_data.getMonth() + 1
        if(h>dateYear||(h<=dateYear&&m>dateMonth)) return this.$message.warning({ message:'请选择有效月份', center: true })
        if (m < 10) m = '0' + m
        let time = h + m
        this.init(this.user_id,time)
      }else{
        this.init(this.user_id)
      }
    },
    /** 新增日期
     */
    addTime() {
      let some_date = this.add_date?this.time_list.filter(res => res.recordDate === this.formateDate(this.add_date)):[]
      if(some_date.length) {
        this.exist_data = true
        this.$message.error({ message:'此日期已存在日记录', center:true })
        return
      }
      this.exist_data = false
    },
    /** 新增日记录
     */
    addDiary() {
      if(this.user_id !== this.my_id) return
      if(!this.add_date) return this.$message.error({ message:'请选择日期', center:true })
      if(this.exist_data) return this.$message.error({ message:'此日期已存在日记录', center:true })
      if(!this.exist_data) {
        const daily_add_content = syncRequest({
          url: 'dailyAddContent',
          method: 'POST',
          data: {
            recordDate: this.formateDate(this.add_date),
            class: '2'
          }
        })
        console.log(daily_add_content)
        if(daily_add_content.errorCode === '1') {
          this.exist_data = true
          this.init()
        }
      }
    },
    formateDate(data) {
      let year = data.getFullYear()
      let month = data.getMonth() + 1
      let day = data.getDate()
      if (month < 10) month = '0' + month
      if (day < 10) day = '0' + day
      return year + '-' + month + '-' + day
    },
    formatMonth(data) {
      let year = data.getFullYear()
      let month = data.getMonth() + 1
      if (month < 10) month = '0' + month
      return year + month
    },
    /**
     *@name 选择时间范围
     */
    handleChangeTime(index) {
      if(this.time_range_index == index) {
        this.time_range[index].is_checked = false
        this.time_range_index = -1
        return
      }
      this.time_range.forEach(res=> {
        res.is_checked = false
      })
      this.time_range[index].is_checked = true
      this.time_range_index = index
    },
    /**  查询
     */
    handleInquire1() {
      if(!this.yearList.length) {
        this.$message.warning({message:'请选择时间', center: true})
        return
      }
      this.visible = false
      this.weekCompare(this.compare_id,this.yearList.join(','))
    },
    /**
     *@name 查询
     */
    handleInquire() {
      let class_str = ''
      this.time_range.forEach(res=>{
        if(res.is_checked) {
          class_str = res.type
        }
      })
      let state_str = ''
      let end_str = ''
      if(this.time_limit) {
        state_str = this.formatMonth(this.time_limit[0])
        end_str = this.formatMonth(this.time_limit[1])
      }
      if(this.time_limit && class_str) return this.$message.error({ message: '记录时间和时间范围只能选择一项', center: true })
      this.initTable(this.user_id,1,state_str,end_str,class_str)
    },
    //合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let first_idx = this.table_items.findIndex(
        (item) => item.weekNum === row.weekNum
      )
      let same_length = this.table_items.filter(
        (x) => x.weekNum === row.weekNum
      ).length
      if ([0].includes(columnIndex)) return rowIndex === first_idx ? [same_length, 1] : [0, 0]
      if ([1].includes(columnIndex)) {
        let second_idx = this.table_items.findIndex(
          (item) => item.recordClass === row.recordClass && item.weekNum === row.weekNum
        )
        let second_length = this.table_items.filter(
          (x) => x.recordClass === row.recordClass && x.weekNum === row.weekNum
        ).length
        return rowIndex === second_idx ? [second_length, 1] : [0, 0]
      }
    },
    /** 对比导出
     */
    handleExportCompare() {
      if(!this.yearList.length) return this.$message.error({ message: '请选择时间', center: true })
      if(!this.is_loading) {
        this.is_loading = true
        fileDownload("monthExpCompareRecord",{
          param:{
            userIdList: this.compare_id?this.compare_id.join(','):this.user_id,
            direction: this.is_switchover === 0 ? 'transverse' : 'portrait',
            timeStr: this.yearList.join(',')
          }
        })
        setTimeout(()=> {
          this.is_loading = false
        },2000)
      }
    },
    /**
     * @name 导出
     */
    handleExport() {
      if(!this.is_loading) {
        this.is_loading = true
        let class_str = ''
        this.time_range.forEach(res=>{
          if(res.is_checked) {
            class_str = res.type
          }
        })
        let state_str = ''
        let end_str = ''
        if(this.time_limit) {
          state_str = this.formatMonth(this.time_limit[0])
          end_str = this.formatMonth(this.time_limit[1])
        }
        if(this.time_limit && class_str) return this.$message.error({ message: '记录时间和时间范围只能选择一项', center: true })
        fileDownload("monthExpTable",{
          param:{
            userId: this.compare_id,
            queryWord: this.search_text,
            queryStartTime: state_str,
            queryEndTime: end_str,
            timeTag:class_str?class_str:''
          }
        })
        setTimeout(()=> {
          this.is_loading = false
        },2000)
      }
    },
    /**  人员日小结
     */
    handleManDuty(e) {
      this.user_id = e.id
      this.user_name = e.name
      this.user_or_part = e.type
      this.search_text = ''
      this.time_limit = ''
      this.time_range.forEach(res=>res.is_checked = false)
      this.init(e.id)
      this.initTable(e.id)
    },
    /**  分页
     */
    currentChange(e) {
      this.initTable(this.user_id,e)
    },
    // 获取本周的日期
    getWeekDay() {
      let self = this
      let dateString = this.formateDate(new Date());
      let presentDate = new Date(dateString);
      let today = presentDate.getDay() !== 0 ? presentDate.getDay() : 7;
      return Array.from(new Array(7), function (val, index) {
        return self.formateDate(new Date(presentDate.getTime() - (today - index - 1) * 24 * 60 * 60 * 1000));
      });
    },
    /**  人员对比
     */
    recordCompared(id) {
      this.compare_id = []
      this.compare_id = id
      this.is_compare = !this.is_compare
      this.weekCompare(this.compare_id,this.yearList.join(','))
    },
    //对比
    weekCompare(id,timeStr) {
      const month_compare_record = syncRequest({
        url: 'monthCompareRecord',
        method: 'POST',
        data: {
          userIdList: id?id.join(','):this.user_id,
          timeStr: timeStr?timeStr:'',
        }
      })
      if(month_compare_record.errorCode === '1') {
        this.compared_list = month_compare_record.data
        this.is_change_table = 2
        this.name_list = []
        this.compared_list[0].forEach(res=> this.name_list.push(res.userName))
        setTimeout(()=> {
          this.is_change_table = this.is_switchover
        },200)
      }
    },
    /**  打开穿梭框
     */
    handleCompared() {
      // this.isShow = true

      this.transferShow = true

      const res = syncRequest({
        url: 'pubGetDeptUserTree',
      })
      if (res.errorCode == '1') {
        this.personnel_list = res.data //[0].children
      }
    },
    /** start
     *
     * @param list 数据数组
     * @param start 1：年；2：月；3：周
     *
     * */
    initPropsList(list) {
      if (list instanceof Array) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].type != 2) {
            list[i].disabled = true;
          }
          if (list[i].children instanceof Array) {
            this.initPropsList(list[i].children);
          }
        }
      }
    },
    // 节点被展开触发，将展开的数据存储，用来设置默认展示
    nodeExpand(obj) {
      if (this.left_open_list.indexOf(obj.id) == -1) {
        this.left_open_list.push(obj.id);
      }
    },
    // 节点关闭触发，将默认显示的该数据删除
    nodeCollapse(obj) {
      this.left_open_list.splice(this.left_open_list.indexOf(obj.id), 1);
    },
    //选中左侧
    leftTreeChange() {
      let arr = this.$refs.timeTree.getCheckedNodes();
      this.left_pitch = arr;
      this.yearList = [];
      for (let i = 0; i < arr.length; i++) {
        if (this.yearList.indexOf(arr[i].id) == -1) {
          this.yearList.push(arr[i].id);
        } else {
          this.yearList.splice(this.yearList.indexOf(arr[i].id), 1);
        }
      }
    },
    //选中左侧
    nodeClick(e) {
      this.init_month = e
    },
    /**  改变布局
     */
    handleChange() {
      this.is_switchover = this.is_switchover === 0 ? 1 : 0
      this.is_change_table = this.is_switchover
    },
    /**  结束对比
     */
    handleStopCompare() {
      this.is_compare = !this.is_compare
      this.compared_list = []
      this.yearList = []
      this.name_list = []
      this.compare_id = []
    },
    //穿梭框子组件向父组件传参
    allShuttleBox(val) {
      console.log( 'val --' , val)
      this.compare_id = []
      val.forEach(res => this.compare_id.push(res.id))
      if(!this.yearList.length) return this.$message.warning({ message: '请选择周', center: true })
      this.weekCompare(this.compare_id,this.yearList.join(','))

    },
  }
}
</script>

<style scoped lang="scss">
.el-header {
  height: auto !important;
  background-color: #F0F0F3;
  color: #333;
  margin-right: 10px;
  padding-bottom: 10px !important;
}
.flex {
  display: flex;
}
::v-deep .el-table__empty-block {
  min-height: 200px;
}
.flex-a {
  align-items: center;
}

.flex-j {
  justify-content: center;
}

.flex-1 {
  flex: 1;
}
::v-deep .el-input__inner {
  font-size: 16px;
}
.head-text {
  font-size: 20px;
  margin-left: 2px;
}
>>> .vxe-modal--header {
  text-align: center;
}
::v-deep .vxe-modal--title {
  font-size: 20px;
}
.f-w-700 {
  font-weight: 700;
}

.color-1966E2 {
  color: #1966E2;
}

.month-box {
  padding: 17px 0 0 40px;
  background-color: #FCFCFC;
}

.b-b-1 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.jin-du {
  font-size: 16px;
  color: #999999;
  margin-left: 7px;
}
.top-head-content {
  flex-direction: row-reverse;
}
.float-man-l-img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  font-size: 16px;
  color: #ffffff;
  background-image: linear-gradient(rgba(241, 188, 87, 1), rgba(249, 172, 121, 1));
  box-shadow: 0 4px 8px 0 rgba(209, 209, 209, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-head {
  font-size: 16px;
  display: flex;
}
::v-deep .vxe-modal--title {
  font-size: 20px;
}
::v-deep .vxe-modal--body {
  position: relative;
}
.top-text {
  padding: 3px 10px;
  margin-left: 8px;
  background-color: #3280FC;
  color: #FFFFFF;
  border-radius: 6px;
  cursor: pointer;
}
.add-diary {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.cursor-p {
  cursor: pointer;
}
.top-head-right {
  padding: 1px 10px;
  border: 1px solid #1C66E2;
  color: #1C66E2;
  border-radius: 6px;
  font-size: 16px;
  margin-left: 15px;
  display: flex;
  align-items: center;
}
.f-s-16 {
  width: 86px;
  font-size: 16px;
  color: #999999;
  margin-right: 25px;
}
.f-s-16-1 {
  font-size: 16px;
}
.box-form {
  width: 100%;
  background-color: #FFFFFF;
  padding: 10px;
}
.search-text {
  width: 164px;
  font-size: 16px;
  margin-right: 6px;
}
.form-content-1 {
  padding: 10px 20px 9px 0;
  display: flex;
  align-items: center;
  position: relative;
}
.form-content {
  padding: 20px 20px 9px 0;
  display: flex;
  align-items: center;
  position: relative;
}

.f-s-20 {
  font-size: 20px;
}

.content-bit {
  width: 17px;
  height: 17px;
  margin-top: 6px;
  border-radius: 1px;
  background-color: rgba(59, 117, 255, 1);
  color: #FFFFFF;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-text-1 {
  flex: 1;
  margin-left: 7px;
  font-size: 16px;
  padding-bottom: 12px;
}

.inquire {
  padding: 6px 14px;
  color: #FFFFFF;
  background-color: #1C66E2;
  border: 1px solid #1C66E2;
  border-radius: 4px;
  box-shadow: 0 0 2px 0 #1C66E2;
  font-size: 16px;
  position: absolute;
  top: -36px;
  right: 20px;
}

::v-deep .el-checkbox {
  margin-right: 22px;
}
::v-deep .el-checkbox__label {
  font-size: 16px;
}
.el-aside {
  background-color: #E9EEF3;
  padding:0;
}
.main-box {
  font-size: 16px;
  background-color: #E9EEF3;
  user-select: none; padding: 12px;
}
::v-deep .vxe-modal--header {
  text-align: center;
}
.mail-list {
  width: 100%;
  height: 100%;
}
::v-deep .user-tag {
  color: #fff;
  background-color: #07f;
  padding: 0 5px;
  border-radius: 999em;
  display: inline-block;
  user-select: all;
}
.my-duty {margin-right: 12px; border-radius: 4px;
}
::v-deep .el-scrollbar__wrap {
  height: 100%;
  overflow-x: auto;
}
.box-card {
  width: 100%;
  background-color: #ffffff;
  padding: 10px; border-radius: 4px;
}

.card-head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.m-b-14 {
  margin-bottom: 10px;
}
.main-box-1 {
  width: 100%;
  user-select: none;
  padding: 10px 0 10px 10px;
  font-family: "Microsoft Yahei";
  background-color: #F0F0F3;
}

.my-duty-1 {
  margin-right: 10px;
  border-radius: 4px;
}
.inquire-1 {
  color: #1890ff;
  background-color: #e8f4ff;
  border: 1px solid #a3d3ff;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-dir {
  flex-direction: column;
}

.align-center {
  align-items: center;
}


::v-deep .user-tag {
  color: #fff;
  background-color: #07f;
  padding: 2px .4em;
  border-radius: 999em;
}

::v-deep .el-select {
  height: 36px;
}

::v-deep .el-select__tags {
  max-width: 140px !important;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.head-left {
  display: flex;
  align-items: center;
}

.compared {
  font-family: PingFangSC;
  margin-left: 41px;
  font-size: 16px;
  color: #1C65E3;
}

.head-right {
  display: flex;
  align-items: center;
}

.head-right > button > img {
  width: 15px;
  height: 15px;
}

.head-right > button {
  margin-left: 15px;
  font-size: 16px;
}
.personage {
  padding: 0.5rem 1.5rem;
}
.personage_box {
  width: 100%;
  padding: 10px 0;
  display: flex;
  border-bottom: 1px solid #eee;
}

.personage_box:nth-last-child(1) {
  border-bottom: none;
}

.personage_box > p:nth-child(1) {
  width: 17px;
  height: 17px;
  line-height: 17px;
  opacity: 1;
  background: #1966e2;
  border-radius: 2px;
  color: #fff;
  text-align: center;
  margin-right: 10px;
  font-size: 13px;
  position: relative;
  top: 4px;
}
.personage-text {
  flex: 1;
  font-size: 16px;
}
.head-right > p:nth-child(1) {
  margin-right: 5px;
}

.head-right > p:nth-child(3) {
  margin-left: 5px;
}

.time-select-box {
  display: flex;
  align-items: center;
  position: relative;
  right: 4.5rem;
}

.btn-switch {
  width: 100px;
  height: 35px;
  opacity: 1;
  background: #1a66e2;
  border-radius: 6px;
  color: #fff;
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.btn-unified {
  width: 75px;
  height: 35px;
  background: #ffffff;
  border: 1px solid #1c66e2;
  border-radius: 7px;
  color: #1c66e2;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.content {
  height: calc(100vh - 186px);
  background-color: #FFFFFF;
}

/*空状态样式*/
.kong-state {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kong {
  width: 190px;
  height: 190px;
  margin-bottom: 30px;
}

.kong-box {
  position: relative;
  top: 19px;
}

.kong-text {
  font-size: 18px;
  color: rgba(153, 153, 153, 1);
}
.text-font {
  font-size: 16px;
  color: #1890ff;
  display: flex;
}
.time-tree {
  max-height: 380px;
  overflow-y: auto;
}
::v-deep .el-tree-node__content > label.el-checkbox {
  margin-left: 14px;
}

::v-deep .el-tree-node__label {
  font-size: 16px;
}
.person_body{ width: 100%;
  .my-duty:last-child{ margin-bottom: 0px; padding-bottom: 0px;}
}
@media (max-width: 1060px) {
  ::v-deep .vxe-modal--title {
    font-size: 18px;
  }
  .personage-text {
    flex: 1;
    font-size: 14px;
  }
  .head-text {
    font-size: 18px;
    margin-left: 2px;
  }
  .float-man-l-img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    font-size: 14px;
    color: #ffffff;
    background-image: linear-gradient(rgba(241, 188, 87, 1), rgba(249, 172, 121, 1));
    box-shadow: 0 4px 8px 0 rgba(209, 209, 209, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .jin-du {
    font-size: 14px;
    color: #999999;
    margin-left: 7px;
  }
  ::v-deep .el-input__inner {
    font-size: 14px;
  }
  ::v-deep .help—change .el-input__inner {
    width: 120px;
  }
  .date-change {
    margin-right: 8px !important;
  }
  .search-text {
    width: 164px;
    font-size: 14px;
    margin-right: -22px;
  }
  .top-head {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
  }
  ::v-deep .vxe-modal--title {
    font-size: 18px;
  }
  .top-head-right {
    padding: 1px 10px;
    border: 1px solid #1C66E2;
    color: #1C66E2;
    border-radius: 6px;
    font-size: 14px;
    margin-left: 15px;
    display: flex;
    align-items: center;
  }
  .f-s-16 {
    width: 86px;
    font-size: 14px;
    color: #999999;
    margin-right: 25px;
  }
  .f-s-16-1 {
    font-size: 14px;
  }
  .f-s-20 {
    font-size: 18px;
  }

  .content-bit {
    width: 17px;
    height: 17px;
    margin-top: 6px;
    border-radius: 1px;
    background-color: rgba(59, 117, 255, 1);
    color: #FFFFFF;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .content-text-1 {
    flex: 1;
    margin-left: 7px;
    font-size: 16px;
    padding-bottom: 12px;
  }

  .inquire {
    padding: 6px 14px;
    color: #FFFFFF;
    background-color: #1C66E2;
    border: 1px solid #1C66E2;
    border-radius: 4px;
    box-shadow: 0 0 2px 0 #1C66E2;
    font-size: 14px;
    position: absolute;
    top: -36px;
    right: 20px;
  }

  ::v-deep .el-checkbox {
    margin-right: 22px;
  }
  ::v-deep .el-checkbox__label {
    font-size: 14px;
  }
  .el-aside {
    background-color: #E9EEF3;
    padding:0;
  }
  .main-box {
    font-size: 14px;
    background-color: #E9EEF3;
    user-select: none; padding: 12px;
  }
  ::v-deep .vxe-modal--header {
    text-align: center;
  }
  .mail-list {
    width: 100%;
    height: 100%;
  }
  .my-duty {margin-right: 12px; border-radius: 4px;
  }

  .box-card {
    width: 100%;
    background-color: #ffffff;
    padding: 10px; border-radius: 4px;
  }

  .card-head {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .m-b-14 {
    margin-bottom: 10px;
  }
  .text-font {
    font-size: 14px;
    color: #1890ff;
    display: flex;
  }
  ::v-deep .el-tree-node__label {
    font-size: 14px;
  }
  .compared {
    font-family: PingFangSC;
    margin-left: 41px;
    font-size: 14px;
    color: #1C65E3;
  }
  ::v-deep .el-checkbox__label {
    font-size: 14px;
  }
  .head-right > button {
    margin-left: 15px;
    font-size: 14px;
  }

  .kong-text {
    font-size: 16px;
    color: rgba(153, 153, 153, 1);
  }
}
</style>
